<%-- 
    Document   : Employee
    Created on : May 9, 2012, 9:28:43 AM
    Author     : Thanh Luan
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>

<html>
    <head>

        <link rel="stylesheet" type="text/css" href="../css/paging.css"/>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/confirm.js"></script>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/jquery.fancybox-1.3.4.pack.js"></script>
        <link rel="stylesheet" type="text/css" href="../scripts/tabs/slidingtabs-horizontal.css">
        <script type="text/javascript" src="../scripts/tabs/slidetab.js"></script>
        <!-- -->
        <link rel="stylesheet" type="text/css" href="../css/thickbox.css"/>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/thickbox.js"></script>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/jquery.rateit.js"></script>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/easypaginate.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/rateit.css">


        <script type="text/javascript" language="javascript">
            var abc  =false;
            var open_cur = 0;
            $j = jQuery.noConflict();
            $j(document).ready(function(){
                initThickBox('.thickbox');
          
                $j('.st_horizontal').slideTabs();
               
                Tab4Kapi();
                //searchClient();
                $j('.text_search').live('keyup',function(){
                    if($j('.text_search').val() == ""){
                        $j('.noteRow').show();
                        $j('.close').trigger('click');   
                                   
                    }else{
                        $j('.close').trigger('click');   
                        $j('.noteRow').hide();
                        $j('.noteRow').each(function(){
                            html = $j(this).html();                            
                            if(ununicode(html).indexOf(ununicode($j('.text_search').val())) > -1)  {                                
                                $j(this).show();
                            }else{
                                $j(this).hide();
                            }
                        });
                    }

                });
                $j('.search_box').hide();       
                $j('.sidebar_search').live('click',function(){
                    $j('.search_box').hide();
                    if($j(this).next().hasClass('active')){

                        $j('.search_box').removeClass('active');
                    }else{

                        $j('.search_box').removeClass('active');
                        $j(this).next().addClass('active');
                        $j(this).next().show();
                    }
                });
                $j(".content_right").live("click",function(){
                    $j('.search_box').hide();
                });

                $j('.fancyLinks').fancybox({               
                    closeBtn:false, 
                    helpers : {
                        overlay : {
                            closeClick : false,
                            css : {
                                'cursor':'default'
                            }
                        }
                    }
                });

                $j(".department1").live("click",function(){ 
                    
                    
                    
                    fn450 = $j(this).attr("lang");
                    $j.post("N450_N850.jsp?&action=group&fh200=99&fn450="+fn450 +"&fn850=0",function(data){
                        if(data!=null){ 
                            window.location.href="employeenew.jsp?&action=reload&department1&fh200=99&fn450="+fn450 +"&fn850=0";
                        }
                           
                    });  
                });
                $j(".department2").live("click",function(){
                   
                    fn850 = $j(this).attr("lang");
                    fn450 = $j(".department1").attr("lang");
                   
                    window.location.href="employeenew.jsp?actionn=reload&fn450="+0 +"&fn850="+fn850;
                    
                });
                
                $j(".department3").live("click",function(){
                     
                    
                    fn850 = $j(this).attr("lang");
                    fn450 = $j(".department1").attr("lang");
                  
                    window.location.href="employeenew.jsp?actionn=reload&fn450="+0 +"&fn850="+fn850;
                   
                });
                
                // Begin Event load ajax form CRM
                   
                $j('.contactN950').live('click',function(){
                    object = $j(this).next();                                              
                    var pn100KH = $j('#form-input-customer\\:pn100').val();                     
                       
                       
                    $j.post("contactCRM.jsp?action=editajaxpage&pn100="+ pn100KH+"&table=N100", function(data){
                        $j('.customer-boxcontact').html(data);
                    });
                         
                        
                    
                });
                $j('.acountT025').live('click',function(){
                    object = $j(this).next();
                    var pn100KH = $j('#form-input-customer\\:pn100').val();      
                    $j.post("accountCRM.jsp?action=editajaxpage&pn100="+pn100KH+"&tv026=N100",function(data){
                        $j('.customer-boxacount').html(data);
                    }) ;
                    
                });
                $j('.infoL200').live('click',function(){
                    object = $j(this).next();
                    var pn100KH = $j('#form-input-customer\\:pn100').val();
                    
                    $j.post("l200EMP.jsp?action=editajaxpage&pn100="+pn100KH,function(data){
                        $j('.customer-boxL200').html(data);
                    }) ;
                    
                });
                
                   
                $j('.infoN350').live('click',function(){
                    object = $j(this).next();
                    var pn100KH = $j('#form-input-customer\\:pn100').val();   
                    $j.post("passportCRM.jsp?action=editajaxpage&pn100="+ pn100KH, function(data){
                        $j('.customer-boxN350').html(data);
                    });
                    
                });
                    
                    
                // End Event load ajax form CRM for Dashbord
                //save column N900
                $j(".updateN900").live("click",function(){
                    pn100 = $j(this).parent(".group_list_cus").attr('lang');
                    fn850 = $j(this).attr('lang');
                    nv902 = $j(this).text();
                    showPleaseWait();
                    $j(this).parents().parents().parents().parents().parents().parent('.item').find('.nv852').text(nv902);
                    
                    $j.post('n900Begin.jsp?action=updateColumN900&pn100='+pn100+'&fn850='+fn850+'&nv902='+nv902,function(data){
                        if(data != null){
                            hidePleaseWait();
                        }
                    });
                    
                });


                $j('.webcame').live('click',function(e){
                    
                    pn100  =$j(this).attr('lang');
                    $j('.scapture').css('visibility','visible');
                    $j('.scapture').css('margin-top',e.pageY-400);
                    $j('.scapture').css('margin-left',e.pageX-630);
                    $j.post('webcame.jsp?pn100='+pn100,function(data){
                        $j('.scapture').html(data);
                    });
                });
                $j( ".sendSMS_person" ).click(function() {
                    $j( "#togglesms" ).show();
                    $j( "#togglesms" ).animate({height:'auto',opacity:'0.9'},"slow");
                    $j( "#togglesms" ).animate({width:'39%',opacity:'0.9'},"slow");
                    var info = $j(this).attr('lang');
                    $j.post("SgtSMS.jsp?"+info,function(data){
                        if(data!=null){
                            $j( "#togglesms" ).html(data);
                        }
                    });
                });
                $j('.check_select').live('click',function(){
                    //    $j(".abc").trigger("click");
                    $j( "#toggle" ).hide();
                    var lang= $j(this).attr("lang");
                    var boool;
                    if( $j(this).is(":checked"))
                    {
                        boool = true;
                    }
                    else
                    {
                        boool = false;
                    }
                            
                    $j.post("employeenew.jsp?action=addCusp100&p100="+lang+"&valueC="+boool,function(data){
                            
                    });
                });
                    
                $j(".checkAll").live("click",function(){                  
                    flag = $j('.checkAll').is(':checked');                
                    $j(".check_select").each(function(){
                        $j('.check_select')  .attr('checked', flag);
                    });                 
                    var boool;
                    if( $j(this).is(":checked"))
                    {
                        boool = true;
                    }
                    else
                    {
                        boool = false;
                    }                  
                    $j.post("employeenew.jsp?action=addAllCusp100&boool="+boool,function(data){                          
                    });

                });
                $j('.itemcontent').live('click',function(){
                    pn100 = $j(this).attr('lang'); 
                   
                    $j('.noteContent').slideUp();
                    $j('.noteContent').html(''); 
                    var debt = $j(this).parent().parent().parent().next().children().children(); 
                    if(debt.hasClass('active')){
                        debt.removeClass('active');
                    }else{                                               
                        debt.removeClass('active');
                        debt.addClass('active');                                               
                        $j.post('itemEmployeenew.jsp?action=getitemvaluePn100&pn100='+pn100,function(data){                      
                            if(data !=null){
                                debt.html(data);
                                debt.slideDown();
                            }
                        });                    
                    }
                });
                slide = gup( 'tab' );
                    if(slide != null && slide !=undefined && slide.length > 0){
                        $j('.'+slide).trigger('click') ;
                    }
            });
        </script>

    </head>


    <body>
        <div id="togglesms">

        </div>
        <a4j:form>
            <f:loadBundle basename="#{environmentSession.localizationSource}" var="locale"/>
            <h:outputText value="<div class='permission' lang='#{loginSession.right.MENU_EMP_VIEW}'></div>" escape="false"/>
            <div id="content">
                <div class="menutop2" style="float:left;width: 98%;margin-left: 0.7%; height: 25px;padding: 2px;">
                    <div style="float:left;margin-left: 2px;margin-right: 2px;">
                        <div class="classimageSMS">
                            <img src="../images/smsnew.png" class="sendSMS_person" lang="page=sendSMSitemEmployee" title="Xác nhận  SMS"/>
                        </div>
                    </div>
                    <div style="float:left;margin-left: 2px;margin-right: 2px;">
                        <h:outputLink  rendered="#{loginSession.right.EMP_LST_MAL}" value="popUpSendEmail.jsp?page=employee&step=9&fk100reload=0&KeepThis=true&amp;TB_iframe=true&amp;height=653&amp;width=741&amp;modal=true" styleClass="thickbox add_new abc" id="thickbox15"  >
                            <h:graphicImage value="../images/emailnew.png"/>
                        </h:outputLink>
                    </div>
                    <div style="float:left;margin-left: 2px;margin-right: 2px;">
                        <h:commandButton rendered="#{loginSession.right.EMP_LST_EXC}" style="margin-left:0px;" actionListener="#{EmpBean.exportExcel()}"  
                                         onclick="showPleaseWait();"                                   
                                         styleClass="buttonExcel" >                

                        </h:commandButton>
                    </div>
                    <div style="float:right;height: 25px;width: 20%;border:1px solid #B2B7BB;">
                         <h:inputText style="  float: left;height: 25px; margin-left: 0;width: 86%;"  value="#{EmpBean.keySearch}" onfocus="if(this.value=='#{EmpBean.keySearch}')this.value='';" styleClass="text_search"/>
                       
                        <div class="buttonsearch" style="margin-left:5px; float:left; border-radius:8px 8px 8px 8px; ">
                            <div class="group cssgroup" >
                                <h:selectOneRadio layout="pageDirection" value="#{EmpBean.typeSearch}" styleClass="feild_sex"  style="margin-left:5px; margin-top:14px; padding:15px; width:195px; height:154px;"   >
                                    <f:selectItem itemValue="0" itemLabel="Tất cả"/>
                                    <f:selectItem itemValue="1" itemLabel="Ðiện thoại"/>
                                    <f:selectItem itemValue="2" itemLabel="Họ tên"/>
                                    <f:selectItem itemValue="3" itemLabel="CMND/Passport"/>
                                    <f:selectItem itemValue="4" itemLabel="Email"/>
                                    <f:selectItem itemValue="5" itemLabel="MSNV"/>
                                </h:selectOneRadio>
                                <h:commandButton action="#{EmpBean.reload}" value="#{locale.search}" style="margin-left:75px; margin-top:5px;" styleClass="buttonsearch2">
                                </h:commandButton>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="content_detail">
                    <div class="fillter">
                        <div class="dropdown">
                            <h:panelGroup id="reload5">
                                <h:panelGroup  rendered="#{EmpBean.fk400 > 0}" >
                                    <div class="select_choise ">

                                        <a href="#"><span><h:outputText value="Action"/></span></a>


                                    </div>
                                    <div class="select_hidden">
                                        <ul>

                                            <li>
                                                <h:outputLink rendered="#{EmpBean.fk400 > 0}" value="addgroupcustomer.jsp?action=loadGroup&page=employeenew.jsp&pk400=#{EmpBean.fk400}&kv451=N100E&KeepThis=true&amp;TB_iframe=true&amp;height=453&amp;width=941&amp;modal=true" styleClass="thickbox add_new" id="thickbox2"  >
                                                    <span> <h:outputText value="#{locale.add_group}"/></span>
                                                </h:outputLink>
                                            </li>
                                            <li >
                                                <h:outputLink rendered="#{EmpBean.fk400 > 0}" value="removegroupcustomer.jsp?action=loadGroup&page=employeenew.jsp&pk400=#{EmpBean.fk400}&kv451=N100E&KeepThis=true&amp;TB_iframe=true&amp;height=425&amp;width=952&amp;modal=true" styleClass="thickbox add_new" id="thickbox3"  >
                                                    <span> <h:outputText value="#{locale.delete_group}"/></span>
                                                </h:outputLink>

                                            </li>


                                        </ul>
                                    </div>
                                </h:panelGroup>
                            </h:panelGroup>
                        </div>
                    </div>
                    <div class="content_right">
                        <div class="content" id="">
                            <div class="list_content" style="margin-top: 0px;" >
                                <div style="width: 100% !important;">
                                    <table>
                                        <tr>
                                            <td class="democolumn" style="width: 2%"><h:outputText value="STT"/></td>                                        
                                            <td class="democolumn" style="width: 10%"><h:outputText value="Action"/></td>
                                            <td class="democolumn" style="width: 2%">  <h:selectBooleanCheckbox styleClass="checkAll" value=""/></td> 
                                            <td class="democolumn" style="width: 20%"><h:outputText value="Họ tên"/></td>
                                            <td class="democolumn" style="width: 6%"><h:outputText value="Chức vụ"/></td>
                                            <td class="democolumn" style="width: 8%"><h:outputText value="Giới tính" /></td>
                                            <td class="democolumn" style="width: 6%"><h:outputText value="Phòng ban"/></td>
                                            <td class="democolumn" style="width: 6%"><h:outputText value="Phone" /></td>
                                            <td class="democolumn" style="width: 10%"><h:outputText value="Email"/></td>
                                            <td class="democolumn" style="width: 8%"><h:outputText value="Ngày sinh"/></td>
                                            <td class="democolumn" style="width: 8%"><h:outputText  value="Ngày làm việc"/></td>
                                        </tr>
                                         <a4j:repeat  value="#{EmpBean.NCURPKS_LISTOFTABN100NDEL}" var="item" rowKeyVar="index" >

                                            <tr class="noteRow" lang="<h:outputText value="#{item.pn100}"/>">
                                                <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: center; width: 2%; border-left: 1px solid #C4C0C9;">
                                                    <h:outputText value="#{index+1}"/>
                                                </td>

                                                <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: center;width: 6%;">
                                                    <h:outputLink   rendered="#{loginSession.right.EMP_LST_ETC}"  value="" styleClass="fancybox">
                                                        <img src="../images/convert.gif" alt="" title="Chuyển lại nhân viên"/>
                                                    </h:outputLink>
                                                    <h:outputLink   rendered="#{loginSession.right.EMP_LST_MOD}"  value="editfromemployee.jsp?action=editEmp&pn100A=#{item.pn100}&height=320px&width=500px" styleClass="fancybox">
                                                        <img src="../images/edit.png" alt="edit" title="edit"/>
                                                    </h:outputLink>


                                                    <h:outputLink   rendered="#{loginSession.right.EMP_LST_DEL}"  value="delete.jsp?id=#{item.pn100}&flag=N100&width=300&height=150" styleClass="fancybox">
                                                        <img src="../images/delete_1.png" alt="delete"  title="delete" />
                                                    </h:outputLink>
                                                </td>
                                                <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: center;width: 2%">
                                                    <div style="text-align: center;width: 100%;">
                                                        <h:selectBooleanCheckbox styleClass="check_select" lang="#{item.pn100}" style="float:left;margin-left:3px !important;" value=""/>
                                                    </div>
                                                </td>

                                                <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="width: 10%">
                                                    <div style="text-align: left;width: 100%;">

                                                        <h:outputText styleClass="itemcontent itemcontent#{item.pn100}" value="#{item.hoten}" lang="#{item.pn100}"></h:outputText>

                                                    </div>
                                                </td>
                                                <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: center;width: 6%">
                                                    <h:outputText value="#{item.nv251}" styleClass="nv852 "/>
                                                </td>
                                                <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="width: 8%">
                                                    <div style="text-align: center;width: 100%;">
                                                        <h:outputText rendered="#{item.nv115=='F'}" value="Nữ"/><h:outputText rendered="#{item.nv115=='M'}" value="Nam"/>

                                                    </div>

                                                </td>
                                                <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: center;width: 6%">
                                                    <h:outputText value="#{item.nv852}" styleClass="nv852 "/>

                                                </td>
                                                <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: center;width: 6%">
                                                    <h:outputText value="#{item.nv121}"/>
                                                </td>
                                                <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: left;width:6%">
                                                   <h:outputLink value="popupSendMailPerson.jsp?page=employee&idx=#{item.pn100}&mailx=#{item.nv105}&typex=employee&KeepThis=true&amp;TB_iframe=true&amp;height=653&amp;width=741&amp;modal=true" styleClass="thickbox add_new" id="thickbox3"  ><h:outputText value="#{item.nv105}" /></h:outputLink>
                                                </td>
                                                <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: center;width: 6%">
                                                    <h:outputText value="#{item.nd128}" ><f:convertDateTime pattern="dd/MM/yyyy"/></h:outputText>
                                                </td>
                                                <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: center;width: 8%">
                                                    <h:outputText value="#{item.ld201}" ><f:convertDateTime pattern="dd/MM/yyyy"/></h:outputText> 
                                                </td>

                                            </tr>
                                            <tr>
                                                <td colspan="12">
                                                    <h:panelGroup styleClass="noteContent" >
                                                    </h:panelGroup>
                                                </td>
                                            </tr>
                                        </a4j:repeat>
                                    </table>
                                </div>
                                <div class="fotter-page">
                                    <jsp:include page="../../common/pagingEmployee.jsp"/>
                                </div>
                            </div>

                            <!-- End List Content-->    
                        </div>
                        <rich:modalPanel id="ajaxLoadingModalBox" minHeight="30" minWidth="40"
                                         height="30" width="40" zindex="2000">
                            <h:outputText value="#{locale.please_wait}" styleClass="startDummer"></h:outputText>
                        </rich:modalPanel>
                    </div>

                </div>
            </div>

        </a4j:form>
    </body>
    <script type="text/javascript" src="../scripts/webcame/jquery.webcam.js"></script>
</html>
<style>
    #main{
        width:100%;
    }
    #content{
        padding:0px !important;
        width:100%;
    }
    #footer{
        width:100%;
    }
    .title_tour{
        width:100%;
    }

    #content_detail {
        float: left;
        padding-left: 10px;
        padding-right: 10px;
        width: 98.5%;
        padding-top: 7px !important;
    }


    #header_content {
        float: right;
        margin-top: 40px;
        width: 87%;
    }
    .webcame{
        background: url("../images/01.png") repeat scroll 0 0 transparent;
        height: 15px;
        width: 27px;
        float:left;
        margin-right:14px;

        cursor: pointer;
    }
    .webcame img{

    }
    .scapture{
        background: none repeat scroll 0 0 #39A3DD;
        height: 321px;
        margin-bottom: 4px;

        margin-top: 16px;
        padding-left: 0;
        position: absolute;
        width: 360px;
        z-index: 200;
        border-radius: 20px;
    }
    .scapture{
        visibility: hidden;

    }
    .fields_more{
        float:left;

        margin-top:44px !important;
    }
    .mesage{
        color: red;
        float: left;
        margin-left: 252px;
        margin-top: 20px;
        text-transform: uppercase;

    }
    .detail_more{
        float:left;
        /* margin-left:254px !important;*/
    }

    .feild_sex td label{width: 150px !important; color:white; font-size:12px; text-transform: none; margin-left:3px;}
    .buttonsearch2{
        border:0;
        background:url(../images/bg_submit.gif) repeat-x;
        width:68px;

        margin:0px 0 10px 20px;
        color:#ffffff;
        font-size:12px;
        font-weight:bold;
        cursor:pointer;
        border-radius:2px;
        padding:4px 0;
        text-transform:uppercase;
    }
    .mesage{
        color: red;
        float: left;
        margin-left: 252px;
        margin-top: 20px;
        text-transform: uppercase;

    }
    .updateN900{
        color:#fff;
        text-align: left;
        margin-left:8px;
        cursor: pointer;
        width:95% !important;
    }
    input{
        float:left;
        margin-left:9px;
    }
    select{
        float:left;
        height: 21px;
        width:82px;
        margin-left:9px;
    }
    .departmentlistN850 ul li{
        background: url("../images/bg_button2.gif");

    }

    .departmentlistN850 ul li span{
        width:125px !important;

    }

    .department:hover .departmentlist{display: block !important;z-index: 999;}
    .feild_sex{
        height: 127px !important;
        margin-left: 5px;
        margin-top: 14px;
        padding: 15px;
        width: 195px;
    }
    .chose1 a{
        width:125px !important;
    }
    /*            .popup-content .main_content .form_item_content .edit_form_left .fields_input {
                    float: left;
                    margin-top: 0px !important;
                    width: 100%;
                }
                .popup-content .main_content .form_item_content .edit_form_right .fields_input {
                    float: left;
                    margin-top: 0px !important;
                    width: 100%;
                }*/
    .fields_input {
        float: left;

        width: 100%;
    }
    .buttonsaveS{
        background: url("../images/bg_submit.gif") repeat-x scroll 0 0 transparent;
        border: 0 none;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 2px 3px #666666;
        color: #FFFFFF;
        cursor: pointer;
        float: right;
        font-size: 14px;
        font-weight: bold;
        margin: 19px 10px 10px;
        padding: 8px 0;
        text-transform: uppercase;
        width: 98px;
        text-align: center;
    }
    .sidebar .search_box .fields_submit input[type="submit"]{
        width: 98px !important;
    }
    .moreMail img{
        width: 22px;
        height: 22px;
    }
    .buttonExcel {
        background: url("../images/excelnew.png") repeat-x scroll 0 0 transparent;
        border: 0 none;
        cursor: pointer;
        float: left;
        height: 25px;
        width: 30px;
    }
    .fields_edit img{
        height: 15px;
        width: 16px;
    }
    .deletepage img{
        height: 22px;
        width: 22px;
    }

    .sidebar_search {
        background: url("../images/searchnew.png") no-repeat scroll 100% 0 transparent;
        border: 0 none;
        cursor: pointer;
        float: left;
        height: 25px !important;
        line-height: 43px;
        margin-top: 0;
        padding-right: 31px;
        text-align: left;
    }

    .sidebar_search span {

        color: #FFFFFF;
        float: left;
        font-size: 14px;
        height: 36px;
        padding-left: 18px;
        text-shadow: 2px 2px 3px #333333;
        text-transform: uppercase;
        width: 200px;
    }
    .sidebar_row1 img{
        height: 30px;
        width: 46px;
    }
    .sidebar_row2 img{
        height: 30px;
        width: 46px;
    }
    .sidebar_row1{
        width: 4%;
    }

    .sidebar_row2 {
        margin-bottom: 0px;
        width: 2%;
    }

    .sidebar_row2 .sidebar{
        margin-bottom: 0px;
        width: 100% !important;
    }
    .content_right .content .list_content .item .fields_info{
        width: 26% !important;
    }
    .content_right .content .list_content .item .fields_contact_emp{
        width:30% !important;
    }
    .sendSMS_person{
        color: #0055A6;;
        cursor: pointer;
    }
    #togglesms {
        background: none repeat scroll 0 0 #226579;
        float: left;
        right: 0px;
        margin-top: 100px;
        position: absolute;
        z-index: 999;
        border-radius: 3px;
        border: 1px solid #53B4BF;
    }
    .classimageSMS{
        float:left;
    }
    .democolumn{

        background: none repeat scroll 0 0 #AA962F;
        font-size: 11px;
        color: #FFFFFF;
        height: 35px;
        font-weight: bold;
        text-align: center;
    }
    .active{
        display: block;

    }
    .democolumn2{
        background: none repeat scroll 0 0 #FFFFFF;
        font-size: 11px;
        color: #000000;
        padding: 3px;
    }
    .odd{
        background: #FFF9D8;
    }
    .itemcontent{
        cursor: pointer;
    }
    .menutop2 img{
        height: 25px;
        width: 25px;
    }

.cssgroup {
    background: none repeat scroll 0 0 #2B3844;
    color: white;
    display: none;
    height: 180px;
    margin-left: -111px;
    position: absolute;
    top: 154px;
    width: 150px;

}

</style>